<template>
  <div class="register">
    <div id="app">
      <div class="container">
        <div class="close">
          <span class="iconfont iconicon-test"></span>
        </div>
        <div class="logo">
          <span class="iconfont iconnew"></span>
        </div>
        <div class="inputs">
          <!-- <input placeholder="请输入手机号" class="input" /> -->
          <!-- <input placeholder="密码" class="input" type="password" /> -->
          <myinput
            :rules="/^(\d{5,6})$|^(1\d{10})$/"
            placeholder="请输入用户名/手机"
            v-model="users.username" 
            msg="请输入正确的用户名/手机"
          ></myinput>
          <myinput :rules="/^(\S{3,16})$/" placeholder="请输入密码" v-model="users.password" type="password"></myinput>
          <myinput :rules="/^(\w{3,8})$/" placeholder="请输入昵称" v-model="users.nickname"></myinput>
        </div>
        <p class="tips">
          已有账号？
          <a href="#/login" class>去登录</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
        <mybutton @click="register">注册</mybutton>
      </div>
    </div>
  </div>
</template>

<script>
import mybutton from '../components/mybutton.vue';
import myinput from '../components/myinput.vue';
import {login,register} from '../apis/users.js'
export default {
  data() {
    return {
      users: {
        username: '',
        password: '',
        nickname:''
      }
    };
  },
  components: {
    mybutton,
    myinput
  },
  methods: {
  async register() {
       let res = await register(this.users);
       console.log(res);
       if(res.data.message == '注册成功') {
           this.$toast.success('注册成功')
           this.$router.push({name: 'login'})
       }else {
           this.$toast.fail('注册失败')
       }
   }
  }
};
</script>

<style lang="less">
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  margin: 0 auto;
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>
